<template>
	<el-dialog :visible.sync="visible" title="安全回路" :close-on-click-modal="false" :close-on-press-escape="false"
		width="1280px">
		<div class="safeContent">
			<div class="imageTxt">
				<p>图例</p>
				<ul>
					<li class="lineList" v-for="item in 3">
						<hr class="safeLine"
							:class="item == 3 ? 'green' : item == 2 ? 'red' : ''" />
						<span v-if="item==1">默认</span>	
						<span v-if="item==2">未采集到电压</span>	
						<span v-if="item==3">采集到电压</span>	
					</li>
				</ul>
			</div>
			<ul class="safeUL" v-if="station == 0">
				<!-- <hr class="safeLine1" /> -->
				<li class="safeLi" v-for="(item, index) in doorListSafe">
					<div class="safeLiContent">
						<span class="safeLiSpan">{{ item.dcu }}</span>
						<div class="safeLiDiv">
							<!-- <hr class="safeLine" :style="index==0?'opacity:0':''" /> -->
							<hr class="safeLine"
								:class="item.collection1 == 0 ? 'green' : item.collection1 == 1 ? 'red' : ''" />
							<div class="arrow-right" :class="item.collection1 == 0 ? 'green1' : item.collection1 == 1 ? 'red1' : ''"></div>
							<p class="safeP">行程开关</p>
						</div>
					</div>
				</li>
			</ul>
			<ul class="safeUL" v-if="station == 1">
				<!-- <hr class="safeLine1" /> -->
				<li class="safeLi" v-for="(item, index) in doorListSafe1">
					<div class="safeLiContent">
						<span class="safeLiSpan">{{ item.dcu }}</span>
						<div class="safeLiDiv">
							<!-- <hr class="safeLine" :style="index==0?'opacity:0':''" /> -->
							<hr class="safeLine"
								:class="item.collection1 == 0 ? 'green' : item.collection1 == 1 ? 'red' : ''" />
							<div class="arrow-right" :class="item.collection1 == 0 ? 'green1' : item.collection1 == 1 ? 'red1' : ''"></div>
							<p class="safeP">行程开关</p>
						</div>
					</div>
				</li>
				<!-- <div class="div-last">
					<div class="arrow-right1 arrow-right-last" :class="lastStatus1 == 0 ? 'green1' : lastStatus1 == 1 ? 'red1' : ''" ></div>
					<hr class="safeLine2" :class="lastStatus1 == 0 ? 'green1' : lastStatus1 == 1 ? 'red1' : ''" />
				</div> -->
			</ul>
            <div class="">
            	<p>说明</p>
				<div style="display: flex;align-items: center;">
					<ul class="safeUL">
						<li class="safeLi" style="width: 166px;">
							<div class="safeLiContent" style="left:0">
								<span class="safeLiSpan">202</span>
								<div class="safeLiDiv">
									<hr class="safeLine red" />
									<div class="arrow-right red1"></div>
									<p class="safeP">行程开关</p>
									<hr class="safeLine"  />
								</div>
							</div>
							
						</li>
					</ul>
					<!-- <div style="margin-left: 50px;">
						<p>行程开关1左侧代表安全回路入点采集</p>
					</div> -->
				</div>
				<!-- <div style="display: flex;align-items: center;">
					<ul class="safeUL">
						<li class="safeLi" style="width: 166px;">
							<div class="safeLiContent" style="left:0">
								<span class="safeLiSpan">202</span>
								<div class="safeLiDiv">
									<hr class="safeLine" />
									<div class="arrow-right"></div>
									<p class="safeP">行程开关1</p>
									<hr class="safeLine"  />
								</div>
							</div>
							
						</li>
					</ul>
					<div style="margin-left: 50px;">
						<p>行程开关2右侧代表安全回路返回点采集</p>
					</div>
				</div> -->
            </div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		safeList: Array,
		safeListNew: Array,
	},
	arrup: [],
	arrdown: [],

	data() {
		return {
			visible: true,
			doorListSafe: [],
			doorListSafe1: [],
			station: '',
			lastStatus: -1,
			lastStatus1:-1,
			secUpOrder:'',//上行安全回路的顺序
			secDownOrder:'',//下行安全回路的顺序
		}
	},
	watch: {
		safeList: {
			handler(val) {
				if(this.secUpOrder=='1'){
					this.doorListSafe = JSON.parse(JSON.stringify(arr)).reverse()
					this.lastStatus = this.doorListSafe[this.doorListSafe.length - 1].collection2
				}else if(this.secUpOrder=='0'){
					this.doorListSafe = JSON.parse(JSON.stringify(arr))
					this.lastStatus = this.doorListSafe[this.doorListSafe.length - 1].collection2
				}
			},
			deep: true
		},
		safeListNew: {
			handler(val) {
				if(this.secDownOrder=='1'){
					this.doorListSafe1 = JSON.parse(JSON.stringify(arr1)).reverse()
					this.lastStatus1 = this.doorListSafe1[this.doorListSafe1.length - 1].collection2
				}else if(this.secDownOrder=='0'){
					this.doorListSafe1 = JSON.parse(JSON.stringify(arr1))
					this.lastStatus1 = this.doorListSafe1[this.doorListSafe1.length - 1].collection2
				}
			}, deep: true
		}
	},
	methods: {
		init(station, arr, arr1,secUpOrder,secDownOrder) {
			this.visible = true
			this.station = station
			this.secUpOrder = secUpOrder
			this.secDownOrder = secDownOrder
			this.$nextTick(() => {
				if(this.secUpOrder=='1'){
					this.doorListSafe = JSON.parse(JSON.stringify(arr)).reverse()
					this.lastStatus = this.doorListSafe[this.doorListSafe.length - 1].collection2
				}else if(this.secUpOrder=='0'){
					this.doorListSafe = JSON.parse(JSON.stringify(arr))
					this.lastStatus = this.doorListSafe[this.doorListSafe.length - 1].collection2
				}
				if(this.secDownOrder=='1'){
					this.doorListSafe1 = JSON.parse(JSON.stringify(arr1)).reverse()
					this.lastStatus1 = this.doorListSafe1[this.doorListSafe1.length - 1].collection2
				}else if(this.secDownOrder=='0'){
					this.doorListSafe1 = JSON.parse(JSON.stringify(arr1))
					this.lastStatus1 = this.doorListSafe1[this.doorListSafe1.length - 1].collection2
				}
			})
		},
	},
}
</script>

<style scoped>
.safeContent {
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
}

.safeUL {
	display: flex;

}

.safeLi {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px dashed rgba(166, 166, 166, 1);
}

.safeP {
	width: 100px;
	text-align: center;
	padding: 10px;
	border: 1px solid rgba(166, 166, 166, 1);
}

.safeLine {
	width: 50px;
	height: 2px;
	background: rgba(166, 166, 166, 1);
}

.safeLine1 {
	width: 50px;
	height: 46px;
	background: transparent;
	border-width: 2px 0px 2px 2px;
	border-style: solid;
	border-color: rgba(166, 166, 166, 1);
	padding: 20px;
	position: relative;
	left: 28px;
	top: 40px;
}

.safeLine2 {
	width: 50px;
	height: 46px;
	background: transparent;
	border-width: 2px 2px 2px 0px;
	border-style: solid;
	border-color: rgba(166, 166, 166, 1);
	padding: 20px;
	position: relative;
	left: -26px;
	top: 40px;
}

.safeLiContent {
	position: relative;
	left: -25px;
}

.safeLiSpan {
	margin-left: 90px;
}

.safeLiDiv {
	display: flex;
	align-items: center;
}

.green {
	background-color: rgba(67, 207, 124, 1);
}
.green1 {
	border-color: rgba(67, 207, 124, 1)!important;
}
.red {
	background-color: rgba(212, 48, 48, 1);
}
.red1 {
	border-color: rgba(212, 48, 48, 1)!important;
}
.imageTxt p {
	width: 750px;
	display: flex;
	justify-content: flex-end;
	margin: 0;
}
.imageTxt ul{
	list-style: none;
	display: flex;
	justify-content: flex-end;
}
.imageTxt  .lineList{
	width: 180px;
	display: flex;
}
.arrow-right{
	width: 20px;
	height: 20px;
	background-color: transparent; /* 模块背景为透明 */
	border-color: rgba(166, 166, 166, 1);
	border-style: solid;
	border-width: 3px 3px 0 0;
	transform: rotate(45deg); /*箭头方向可以自由切换角度*/
	position: absolute;
	left: 31px;
}
.arrow-right1{
	width: 20px;
	height: 20px;
	background-color: transparent; /* 模块背景为透明 */
	border-color: rgba(166, 166, 166, 1);
	border-style: solid;
	border-width: 3px 3px 0 0;
	transform: rotate(-135deg); /*箭头方向可以自由切换角度*/
	position: absolute;
	left: 0px;
}
.div-last{
	position: relative;
}
.arrow-right-last{
	position: absolute;
	top: 126px;
	left:-26px;
	padding: 8px;
}
</style>
